1
00:00:00,810 --> 00:00:03,220
Hello and welcome to this lecture.

2
00:00:03,450 --> 00:00:05,700
In this lecture all will be created.

3
00:00:05,790 --> 00:00:12,920
The stylin for the app with C S S.

4
00:00:14,040 --> 00:00:21,440
I have got my text editor opened and I'll be writing my C Ss inside here.

5
00:00:21,460 --> 00:00:23,090
You can see if God is here says file.

6
00:00:23,100 --> 00:00:27,410
They highlight highlighted the way this lecture is going to work.

7
00:00:27,420 --> 00:00:33,600
I'm going to add a chunk of could each time and then explain the code to you.

8
00:00:33,600 --> 00:00:40,380
I think you create more value to me just explain it could put to you rather than you watch me type and

9
00:00:40,380 --> 00:00:42,680
take up so much time.

10
00:00:42,990 --> 00:00:49,840
I have added some code from line 1 to lying he leaven sule.

11
00:00:49,890 --> 00:01:00,630
When you are applying styling we see SS You need to first of four identify the element you're trying

12
00:01:00,630 --> 00:01:01,260
to start.

13
00:01:01,260 --> 00:01:06,320
Just like going to barber You you here will be the limit.

14
00:01:06,510 --> 00:01:12,290
So here in this case the I.D. calculator is the target here.

15
00:01:12,420 --> 00:01:14,700
So if we Popol that I hate email file.

16
00:01:14,700 --> 00:01:19,290
Notice here the form here is called a calculator.

17
00:01:19,320 --> 00:01:20,610
The I.D..

18
00:01:20,810 --> 00:01:22,200
With csx.

19
00:01:22,260 --> 00:01:27,240
You identify an I.D. with the hash symbol and when you write it.

20
00:01:27,240 --> 00:01:35,180
Make sure there are no gaps between the tag hash tag and the name saroyan quickly.

21
00:01:35,640 --> 00:01:36,070
True.

22
00:01:36,090 --> 00:01:44,150
The stores here saw every store every element use Tao mozz act as a selector also in this case.

23
00:01:44,160 --> 00:01:46,260
The idea is the selector.

24
00:01:46,560 --> 00:01:55,950
And then you you place the property as the property is what you want to style and then you have the

25
00:01:55,950 --> 00:02:02,520
value and you separate the property from the value with a call on it's considered column there.

26
00:02:02,580 --> 00:02:08,310
So what I'm saying is that I want the background column on line to and one of the background colour

27
00:02:08,400 --> 00:02:10,990
for the catlett are to be this value.

28
00:02:11,220 --> 00:02:16,110
So this is a Hexa decimal value.

29
00:02:16,110 --> 00:02:17,850
This is a Web site I use.

30
00:02:17,850 --> 00:02:23,490
A lot is just the address here for the website so you have to friend x values here.

31
00:02:23,520 --> 00:02:30,510
So if you're not sure what the actual column names are you can use the hex decimal values which are

32
00:02:30,540 --> 00:02:32,500
preceded with the hash tag here.

33
00:02:32,670 --> 00:02:43,880
So this is where I got most of my colours fun and you have to end your your statement with a call on.

34
00:02:43,980 --> 00:02:50,050
So once you finish this timeline once you've identified the property and the value you now ended with

35
00:02:50,050 --> 00:02:54,600
this semicolon without the semicolon it will not work again.

36
00:02:54,650 --> 00:02:59,750
Line 3 here is there with I have set there with to 450 pixels.

37
00:02:59,760 --> 00:03:05,350
That's how wide how 1 the calculator form to be the height.

38
00:03:05,370 --> 00:03:13,470
Given the 350 pixels the law in the is the colour of the text or any text thatll be typed in will be

39
00:03:13,470 --> 00:03:14,000
white.

40
00:03:14,040 --> 00:03:22,920
So that is the value for white in Hexa value padding in refers to this space inside the element.

41
00:03:22,920 --> 00:03:26,080
So I've given a 5 to 5 pixels with padding.

42
00:03:26,100 --> 00:03:32,520
You can apply padding to all four corners so you've got a top the right the bottom on the left so is

43
00:03:32,640 --> 00:03:40,140
applied in that order whereby you specified a single value like a specified 55 pixels.

44
00:03:40,290 --> 00:03:49,110
It was applied in the order of top right bottom left and you can remember that using the word trouble.

45
00:03:49,110 --> 00:03:52,670
Taking out the vowels Wisha the holes left leaves you with.

46
00:03:52,680 --> 00:04:02,840
Top right bottom left border style means you don't want any stylin on the border so that's why I've

47
00:04:02,870 --> 00:04:05,300
set it to none bodied radials.

48
00:04:05,290 --> 00:04:07,770
I've said lead to 25 pixels on line.

49
00:04:07,770 --> 00:04:14,000
My body radios is what gives the form a bit of a rounded corner.

50
00:04:14,310 --> 00:04:20,160
Okay so play around with these values and see how your form looks margin.

51
00:04:20,160 --> 00:04:23,960
What margin does margin refers to the space outside.

52
00:04:24,180 --> 00:04:26,950
Why padding refers to the space inside.

53
00:04:27,120 --> 00:04:34,130
So what I'm saying is that I want the margin from the top to drop 50 pixels or right again.

54
00:04:34,140 --> 00:04:42,070
Margin is similar to padded in terms of how you apply it is top right bottom left so we have one value

55
00:04:42,080 --> 00:04:47,640
specified it will be applied to top right bottom left.

56
00:04:47,940 --> 00:04:48,260
Okay.

57
00:04:48,270 --> 00:04:55,320
NOTE Is I use margin or tool or tool will automatically to the margin automatically.

58
00:04:55,670 --> 00:04:59,570
Okay will top right bottom left Israeli dissenter's it.

59
00:04:59,870 --> 00:05:10,310
Use on line 11 added another margin from the top just to make sure if the form is dropped down from

60
00:05:10,310 --> 00:05:12,030
the top I don't want it too high.

61
00:05:12,320 --> 00:05:15,370
That's what that does.

62
00:05:15,410 --> 00:05:18,200
I have added some more tags here.

63
00:05:18,230 --> 00:05:18,970
Styling.

64
00:05:19,100 --> 00:05:24,340
So from line 14 to line twenty seven line 14 here.

65
00:05:24,350 --> 00:05:28,740
Is this dialling in for the input so the actual input.

66
00:05:29,000 --> 00:05:37,160
So I have set it to float to the right of the container which of the form you can move right and clipboard

67
00:05:37,230 --> 00:05:44,180
property on line 17 makes avoids the implied input pillowman from colliding.

68
00:05:44,180 --> 00:05:49,460
So where there is a coalition it will separate the coalition does on either side.

69
00:05:49,490 --> 00:05:50,320
That's what they claim.

70
00:05:50,320 --> 00:06:00,590
Both means I've said to with online 18 height on 19 marjane on 20 text a line means I want the text

71
00:06:00,650 --> 00:06:02,360
to be centred.

72
00:06:02,640 --> 00:06:08,810
That's the property and then line 22 font which means I wanted to be bold.

73
00:06:08,810 --> 00:06:10,550
That's what font word means.

74
00:06:10,580 --> 00:06:18,420
You can set it to be bold or out line 25 is the paragraph element the piece noun for paragraph.

75
00:06:18,710 --> 00:06:24,490
So I'm styling the power grab with a font size of 35 pixels.

76
00:06:25,640 --> 00:06:33,450
I have added some more styling here from line twenty eight all the way down to line 14 right.

77
00:06:33,460 --> 00:06:40,070
So let's have a look at this actrix This idea actually bit here.

78
00:06:40,130 --> 00:06:47,520
So this add up here is the actual button that or the impled tab that you use when you add up.

79
00:06:47,540 --> 00:06:53,090
So are my playing style into that so this is the standing I've given it a background call with this

80
00:06:53,090 --> 00:06:55,280
value border style.

81
00:06:55,280 --> 00:06:57,470
I don't want no stylin on the border.

82
00:06:57,680 --> 00:07:07,310
Border radios have explained what that and got the wave height of Carlotta Quello RAF refers to the

83
00:07:07,340 --> 00:07:12,310
text that you type inside that input.

84
00:07:12,450 --> 00:07:21,350
Okay font sizes the artle size of the text and then margin refers to the space around the element so

85
00:07:21,500 --> 00:07:26,710
thin that from the right I want the margin to come down.

86
00:07:26,750 --> 00:07:29,110
Hundred and twenty pixels.

87
00:07:29,480 --> 00:07:39,080
So does this time mean for the ADD UP idea and then we've caught the hate one element which is the heading.

88
00:07:39,260 --> 00:07:53,460
So this is estaminet given to the text font size 6 to 5 pixels text lying carlaw Giving it that to apply.

89
00:07:53,470 --> 00:08:02,240
If that is how online 44 is a comment anything that's a comment is neglected by a web browser and a

90
00:08:02,250 --> 00:08:04,350
stylin is not applied.

91
00:08:04,610 --> 00:08:11,090
So if you want to troubleshoot something you can just use this Asterix to troubleshoot.

92
00:08:11,330 --> 00:08:21,840
So that line 44 here would not apply because I have commented it out line 46 to 49 basis on the idea

93
00:08:21,870 --> 00:08:26,340
quad percent and I've applied it column to it just a colour.

94
00:08:26,420 --> 00:08:35,230
That's what the property I am assigning to this Heidi and I've given it a hex value.

95
00:08:35,480 --> 00:08:36,490
So this percent.

96
00:08:36,500 --> 00:08:40,080
Let's see what is the percent if we go back here.

97
00:08:40,220 --> 00:08:45,030
The percent here is the actual span element.

98
00:08:45,290 --> 00:08:47,020
Okay so the span element.

99
00:08:47,030 --> 00:08:49,130
I'm giving it an idea of a percent.

100
00:08:49,140 --> 00:08:55,840
So one part as plans used to join to test to get out so this part here will be giving a separate quote

101
00:08:56,000 --> 00:08:57,280
from this on the part.

102
00:08:57,320 --> 00:09:01,190
That's what this stylee is doing here.

103
00:09:01,310 --> 00:09:03,280
So let's see it for this tiling.

104
00:09:03,290 --> 00:09:05,150
If I say this.

105
00:09:08,770 --> 00:09:15,150
Okay so this this what they document looks like I did my MBA up so if I refresh this style should be

106
00:09:15,150 --> 00:09:15,940
applied.

107
00:09:16,010 --> 00:09:16,410
Okay.

108
00:09:16,410 --> 00:09:22,400
So you can see now with the styling it looks a little bit prettier or key.

109
00:09:22,450 --> 00:09:25,330
So you can't do anything with it.

110
00:09:25,350 --> 00:09:29,170
You can see here you can type stuff but nothing will work.

111
00:09:29,490 --> 00:09:33,660
I'll say because I have not implemented the Jabr script.

112
00:09:33,660 --> 00:09:41,280
So if I do that and type in that pressing calculate nothing would work.

113
00:09:41,670 --> 00:09:49,860
Also notice I can't type anything in here and anything in here because once you calculate the value

114
00:09:49,860 --> 00:09:51,640
will be popped into this.

115
00:09:51,880 --> 00:09:55,620
The disable note is where we were equating the input element.

116
00:09:55,770 --> 00:10:00,140
I use a disabled attribute in the hastier male parts.

117
00:10:00,150 --> 00:10:01,410
So that's what this does.

118
00:10:01,410 --> 00:10:06,750
It prevents you from clicking or add in something to this two inputs.

119
00:10:06,940 --> 00:10:10,140
Okay this to impose would be populated.

120
00:10:10,230 --> 00:10:14,960
Once you've completed the values that's sit for this lecture.

121
00:10:15,030 --> 00:10:16,980
Thank you so much for watching.

122
00:10:16,980 --> 00:10:17,910
Bye for now.

123
00:10:17,970 --> 00:10:26,240
The next leg Chair will implement the functionality using a query which is a javascript library.